/*4.7 警告提示
  name:       hui-alert
  example:
    <div class="hui-alert hui-alert-success|hui-alert-danger|hui-alert-error|hui-alert-info|hui-alert-block">
      <i class="hui-iconfont">&#xe6a6;</i>
      <div class="hui-alert-message">标题</div>
      <div class="hui-alert-description">警告内容</div>
    </div>
  explain:    警告,使用警告框jQuery插件
*/

.hui-alert {
  position: relative;
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  color: #c09853;
  .hui-iconfont {
    position: absolute;
    top: 9px;
    right: 10px;
    line-height: 20px;
    cursor: pointer;
    color: #000;
    opacity: 0.2;
    _color: #666;
    &.hover {
      color: #000;
      opacity: 0.8;
    }
  }
  .hui-alert-message {
    color: #c09853;
    font-size: 16px;
    margin-bottom: 4px;
  }
  .hui-alert-description {
    font-size: 14px;
    line-height: 22px;
  }
  
  &.hui-alert-success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    .hui-alert-message {
      color: #468847;
    }
  }
  &.hui-alert-danger {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
    .hui-alert-message {
      color: #b94a48;
    }
  }
  &.hui-alert-error {
    color: #fff;
    background-color: #f37b1d;
    border-color: #e56c0c;
    .hui-alert-message {
      color: #fff;
    }
  }
  &.hui-alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
    .hui-alert-message {
      color: #31708f;
    }
  }
  &.hui-alert-block {
    padding-top: 14px;
    padding-bottom: 14px;
    >p,
    >ul {
      margin-bottom: 0;
    }
    p+p {
      margin-top: 5px;
    }
  }
}

